<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户管理</title>
  <script src="../js/vue.min.js"></script>
  <script src="../js/axios.min.js"></script>
  <script src="../js/jquery.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../ele-2.15.7/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="../ele-2.15.7/index.js"></script>
</head>
<body>
<div id="app">
  <el-container >
    <el-header style="">
      <el-image src="../image/YYDS.png" style="height: 80px;width: 200px;float: right;margin-bottom: 50px" ></el-image>
      <h3>尊敬的管理员{{name}}，欢迎回来</h3>
    </el-header>
    <el-container >
      <el-aside width="150px" >
        <el-menu
                active-text-color="#0000ff"
                text-color="#a0cfff"
                default-active="1"
                class="el-menu-vertical-demo">
          <el-menu-item index="1">
            <a href="user.html">
              <i class="el-icon-menu"></i>
              <span slot="title">用户管理</span>
            </a>
          </el-menu-item>
          <el-menu-item index="2" >
            <a href="movie.html">
              <i class="el-icon-document"></i>
              <span slot="title">影片管理</span>
            </a>
          </el-menu-item>
          <el-menu-item index="3">
            <a href="arrange.html">
              <i class="el-icon-setting"></i>
              <span slot="title">影片安排</span>
            </a>
          </el-menu-item>
          <el-menu-item index="4">
            <a href="cinema.html">
              <i class="el-icon-location"></i>
              <span slot="title">影院管理</span>
            </a>
          </el-menu-item>
          <el-menu-item index="5">
            <a href="indent.html">
              <i class="el-icon-menu"></i>
              <span slot="title">订单管理</span>
            </a>
          </el-menu-item>
          <el-menu-item index="6">
            <a href="AboutMe.html">
              <i class="el-icon-setting"></i>
              <span slot="title">友情链接管理</span>
            </a>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-main>
        <el-container>
          <el-header>
            <el-form :inline="true" class="demo-form-inline" style="display: flex; align-items: center">
              <el-form-item label="姓名">
                <el-input v-model="username" placeholder="姓名"></el-input>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click.prevent="query()">查询</el-button>
                <el-button type="primary"@click.prevent="create()" >添加</el-button>
              </el-form-item>
            </el-form>
          </el-header>
          <el-container>
            <el-main>
              <el-table :data="tableData" style="width: 100% "  border>
                <el-table-column prop="username" label="用户昵称"></el-table-column>
                <el-table-column prop="userzh" label="用户账号"></el-table-column>
                <el-table-column prop="pwd" label="用户密码"></el-table-column>
                <el-table-column prop="phone" label="电话号码"></el-table-column>
                <el-table-column prop="time" label="注册时间"></el-table-column>
                <el-table-column prop="email" label="邮箱"></el-table-column>
                <el-table-column prop="isvip" label="VIP用户(0是1否)"></el-table-column>
                <el-table-column prop="" label="冻结账号">
                  <template slot-scope="scope">
                    <el-switch
                            @change="changes(scope.row)"
                            v-model="scope.row.freeze"
                            active-color="#ff4949"
                            inactive-color="#ddd"
                            :active-value="0"
                            :inactive-value="1">
                    </el-switch>
                  </template>
                </el-table-column>
                <el-table-column prop="image" label="图片">
                  <template slot-scope="scope">
                    <el-image
                            style="width: 80px; height: 100px"
                            :src="'../'+scope.row.image"
                            fit="contain"></el-image>
                  </template>
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">
                  <template slot-scope="scope">
                    <el-button @click="modify(scope.row)"  type="text" size="small">编辑</el-button>
                    <el-popconfirm title="请问是否经逻辑删除, 否则使用物理删除？"
                                   confirm-button-text="逻辑删除"
                                   cancel-button-text="物理删除"
                                   @confirm="remove(scope.row,'逻辑删除')"
                                   @cancel="remove(scope.row,'物理删除')" >
                      <el-button slot="reference" type="text" size="small">删除</el-button>
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </el-table>
            </el-main>
          </el-container>
        </el-container>
      </el-main>
      <el-dialog title="用户管理" :visible.sync="dialogFormVisible">
        <div style="display: flex; justify-content: space-around;">
          <el-form >
            <el-form-item label="姓名" :label-width="formLabelWidth">
              <el-input v-model="editUser.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="账号" :label-width="formLabelWidth">
              <el-input v-model="editUser.userzh" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth">
              <el-input v-model="editUser.pwd" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话号码" :label-width="formLabelWidth">
              <el-input v-model="editUser.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="注册时间" :label-width="formLabelWidth">
              <el-date-picker v-model="editUser.time" type="date" autocomplete="off"></el-date-picker>
            </el-form-item>
            <el-form-item label="邮箱" :label-width="formLabelWidth">
              <el-input v-model="editUser.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="VIP" :label-width="formLabelWidth">
              <el-select v-model="editUser.isvip" placeholder="请选择">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

          </el-form>
          <el-upload name="image"
                     class="avatar-uploader"
                     action="../UploadImageServlet.s"
                     :show-file-list="false"
                     :on-success="handleAvatarSuccess"
                     :before-upload="beforeAvatarUpload">
            <img v-if="editUser.image" :src="'../'+editUser.image" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveUser">确 定</el-button>
        </div>
      </el-dialog>
    </el-container>
    <el-footer >

    </el-footer>
  </el-container>
</div>

<script>
  var v=new Vue({
    el:"#app",
    data:{
      tableData:[],
      username:"",
      editUser:{username:"",userzh:"",pwd:"",phone:"",time:"",email:"",image:"",isvip:""},
      formLabelWidth:"100px",
      dialogFormVisible:false,
      options: [{
        value: '0',
        label: '非VIP'
      }, {
        value: '1',
        label: 'VIP'
      }],
      name:""
    },
    created(){
      this.query()
      axios.get("../GetUserServlet.s").then(res=>{
        this.name = res.data
      })
    },
    methods:{
      changes(user){
        axios({
          url:"../FreezeServlet.s",
          params:{
            userid:user.userid,
            freeze:user.freeze,
          }
        }).then(res=>{
          this.$message(res.data.msg)
        })
      },
      query (){
        axios({
          url:"../UserServlet",
          params: {
            username:this.username,
          }
        }).then((res)=>{
          this.tableData=res.data;
        });
      },
      saveUser(){
        var params=new URLSearchParams();
        if(this.editUser.time instanceof Date){
          this.editUser.time = this.editUser.time.toLocaleDateString();
          this.editUser.time = this.editUser.time.replace(/\//g, "-")
        }
        for(let name in this.editUser){
          params.append(name,this.editUser[name]);
        }
        axios.post("../SaveUserServlet.s",params).then(res=>{
          if(res.data.code==1){
            this.$message(res.data.msg);
            this.query();
            this.dialogFormVisible=false;
          }else{
            this.$alert(res.data.msg);
          }
        })
      },
      handleAvatarSuccess(res, file) {
        // res 是后台返回的结果 , 但是 此 res != axios.res
        // res ==> axio.res.data
        // res.data ==> webpath
        this.editUser.image = res.data;
        this.$forceUpdate();
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type.indexOf('image/') > -1;
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像只能是图片格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        //  返回 false 终止上传
        return isJPG && isLt2M;
      },
      create(){
        this.editUser={username:"",usezh:"",pwd:"",phone:"",time:"",email:"",image:""};
        this.dialogFormVisible=true;
      },
      modify(user){
        // 复制 book 的属性 => editBook
        for(let name in user){
          this.editUser[name]=user[name];
        }

        let months = ['一','二','三','四','五','六','七','八','九','十','十一','十二']

        let m = this.editUser.time.replace(/(\S+)月\s+(\d+)[,\s]+(\d+)/
                ,"$1")
        // 获取月份 数字
        let i = months.findIndex(month=>{
          return month == m;
        })
        // 修改日期格式
        let date = this.editUser.time.replace(/(\S+)月\s+(\d+)[,\s]+(\d+)/
                ,"$3/"+(i+1)+"/$2");
        // 将字符串 转 日期类型
        date = new Date(date);
        this.editUser.time = date;
        this.dialogFormVisible=true;
      },
      remove(user,flag){
        this.$confirm('此操作将'+flag+'该图书, 是否继续?', '提示', {
          type: 'warning'
        }).then(() => {
          axios.get("../RemoveUserServlet.s",{
            params : {
              userid : user.userid,
              flag:flag
            }
          }).then(res=>{
            this.$message('已删除!');
            this.query();
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },

      // demo(d){
      //   if(d.freeze === 0){
      //     return 1
      //   }else{
      //     return 0
      //   }
      // }
    }
  })
</script>
<style>
  html,body,#app{
    height: 100%;
    padding: 0px;
    margin: 0px;
  }

  .el-container{
    height: 100%;
  }
  .el-tabs__content{
    height: calc(100% - 68px);
  }
  .el-tab-pane{
    height: 100%;
  }
</style>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
</body>
</html>